<!-- 首页测边框加头标题界面 -->

<template>
    <div >
      <el-container id="bg">
        <!-- <el-aside width="200px"> --><!-- 侧边栏 -->
  
  
         
  
          <el-menu router :default-openeds="['', '']"  
          
          active-text-color="#ffd04b" :collapse="isCollapse"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"><!-- //菜单栏 -->
  
            <el-submenu 
            v-if="user.role == '2'"
             index="1" class="game-menu"><!-- //游戏商城 -->
            
              <template  slot="title" >
                
                <i class="el-icon-menu" style="color:white;font-size: 24px; font-weight: bold;"></i>
                <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">游戏商城</span>
                
              </template>
  
              
              <el-menu-item-group class="yun1">
                
                <template slot="title" >
                  
                  <span style="color:white;font-size: 14px; font-weight: bold;">热门游戏</span></template>
  
                <el-menu-item index="/usergame"   @click="addTab(editableTabsValue)" >
                  <i class="el-icon-sunny" style="color:white;font-size: 24px; font-weight: bold;"></i>
                  <span style="color:white;font-size: 20px; font-weight: bold;">首页</span></el-menu-item>
  
                <el-menu-item index="/usergame"><span
                    style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                    <i class="el-icon-sunset" style="color:white;font-size: 24px; font-weight: bold;"></i>
                    闯关</span></el-menu-item>
  
              </el-menu-item-group>
  
              <el-menu-item-group   class="yun2">
                <template slot="title" ><span style="color:white;font-size: 14px; font-weight: bold;">单人游戏</span></template>
  
                <el-menu-item index="/usergame"><span
                    style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                    <i class="el-icon-sunrise-1" style="color:white;font-size: 24px; font-weight: bold;"></i>
                    休闲</span></el-menu-item>
  
              </el-menu-item-group>
  
              <el-menu-item-group  class="yun4">
                <template slot="title" ><span style="color:white;font-size: 14px; font-weight: bold;">快速游戏</span></template>
  
                <el-menu-item index="usergame"><span
                    style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                    <i class="el-icon-mobile-phone" style="color:white;font-size: 24px; font-weight: bold;"></i>
                    小游戏</span></el-menu-item>
  
              </el-menu-item-group>
              
            </el-submenu>
  
            <el-submenu
            v-if="user.role == '2'"
            index="2" class="game-menu"><!-- //游戏管理 -->
  
              <template slot="title">
                <i class="el-icon-coordinate" style="color:white;font-size: 24px; font-weight: bold;"></i>
                <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">游戏管理</span>
              </template>
  
              <el-menu-item-group class="game-menu1">
  
                <el-menu-item index="/gameku"><span
                    style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                    <i class="el-icon-s-home" style="color:white;font-size: 24px; font-weight: bold;"></i>
                    游戏库管理</span></el-menu-item>
  
                <el-menu-item index="/collectable"><span
                    style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                    <i class="el-icon-collection-tag" style="color:white;font-size: 24px; font-weight: bold;"></i>
                    收藏管理</span></el-menu-item>
  
                <el-menu-item 
                v-if="user.role == '3'"
                index="/collectable"><span style="color: white;font-size: 20px; font-weight: bold;">
                  <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
                  分类管理</span></el-menu-item>
  
              </el-menu-item-group>
  
            </el-submenu>
  
  
  
  
  
            <el-submenu 
            v-if="user.role == '1'"
             index="3" class="game-menu2"><!-- //游戏管理 -->
  
              <template slot="title">
                <i class="el-icon-user" style="color:white;"></i>
                <span slot="title" style="color:white;">用户管理</span>
              </template>
  
              
  
              
  
            </el-submenu>


           <!--  //购物车 -->
           
           <el-submenu
           v-if="user.role == '2'"
           index="3" class="game-menu"><!-- //游戏管理 -->
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-shopping-cart-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">购物车</span>
               <el-badge value="new" class="badge-custom"  v-if="showBadge">
               </el-badge>
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/shopcar" @click="toggleBadge">
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-shopping-bag-1" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   购物车商品管理
                  </span>
                  <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge>
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>
         





           <!-- //订单管理 -->
           <el-submenu
           v-if="user.role == '2'"
           index="4" class="game-menu"><!-- //订单管理 -->
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-s-order" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">订单管理</span>
               <el-badge value="new" class="badge-custom"  v-if="showBadge">
               </el-badge>
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/gameorder" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-s-claim" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   商品订单管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>









           <!-- 个人信息管理 -->
           <el-submenu
           v-if="user.role == '2'"
           index="5" class="game-menu">
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-user-solid" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">个人信息</span>
               
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/usernew" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-s-custom" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   个人信息管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>

                <el-menu-item index="/resetview" >
                  <div style="position:relative;display:flex;align-items:center;">
                  <span
                     style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                     <i class="el-icon-s-custom" style="color:white;font-size: 24px; font-weight: bold;"></i>
                     修改密码管理
                    </span>
                    <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                  </div>
                  </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>










           <!-- 资产管理 -->
           <el-submenu
           v-if="user.role == '2'"
           index="6" class="game-menu">
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-office-building" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">资产管理</span>
               
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/rechargeview" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-coin" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   余额管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>
















  
          </el-menu>
  
        <!-- </el-aside> -->
  
        <el-container>
  
          <el-header class="headercolor">
            
          <!--   导航栏收起按钮 -->
           <!--  <el-radio-group v-model="isCollapse" style="float:left;margin-top:20px">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group> -->
            <el-button @click="toggleCollapse"  style="float: left; ">
              <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 30px;;"></i>
             <!--  {{ isCollapse ? '展开' : '收起' }} -->
            </el-button>



            
            
  
            <el-dropdown style="float: left;margin-left: 10px;">
              
              <label for="setting">
                <el-avatar
                :size=55
                  :src="'http://47.99.51.143:9000/files/' + user.image"></el-avatar>
                  
              <span style="margin-left: 10px; font-size:20px;top:0px;position:relative;color:pink;">{{ user.name }}</span>
              <i class="el-icon-setting" ></i>
  
              <el-dropdown-menu   slot="dropdown" id="setting">
  
                <el-dropdown-item ><div @click="userEdit()">个人信息</div>
                  </el-dropdown-item>
  
                <el-dropdown-item><router-link to="/" style="text-decoration:none;color:black;">退出登录</router-link></el-dropdown-item>
  
                <el-dropdown-item><div @click="passwordEdit()">修改密码</div></el-dropdown-item>
  
              </el-dropdown-menu>
  
            </label>

            
            </el-dropdown>
  
  
  
            
            <div  class="lg-word" :class="[wordFlag ? 'lg-done' : '']">
             
              <span class="w-base">游</span>
              <span class="w-base">戏</span>
              <span class="w-base">服</span>
              <span class="w-base">务</span>
              <span class="w-base">管</span>
              <span class="w-base">理</span>
              <span class="w-base">系</span>
              <span class="w-base">统</span>
             
            </div>

            
            
  
            
            <el-dialog title="个人信息修改"   draggable :visible.sync="userFormVisible" >
              <el-form :model="userform">
                <el-form-item label="账户名" prop="name" label-width="15%">
              <el-input
              v-model="userform.name"
              autocomplete="off"
              > </el-input></el-form-item>
    
              <el-form-item label="昵称" prop="pet" label-width="15%">
                <el-input 
                v-model="userform.pet"
                autocomplete="off"
                > </el-input></el-form-item>
    
    
    
    
                <!-- <el-form-item label="头像" label-width="15%">
                  <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    action="http://47.99.51.143:9000/files/upload"
                    :on-success="successUserUpload"
                  
                    style="float: left; margin-left: 20px"
                  >
                  <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">
    
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   
    
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item> -->
    
    
              <!--   <el-form-item label="头像" >
                  <el-upload
                    class="avatar-uploader"
                    action="http://47.99.51.143:9000/upload"
                    
                    name="image"
                    :show-file-list="false"
                    :on-success="successUserUpload"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="userform.image" :src="userform.image" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
                 -->




                 <el-form-item label="头像" >
                  <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    action="http://47.99.51.143:9000/files/upload"
                    
                    :on-success="successUserUpload"
                    style="float: left; margin-left: 20px"
                  >
                  <img v-if="userform.image" :src="'http://47.99.51.143:9000/files/' + userform.image" class="avatar">
          
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   
          
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
    
    
    
    
    
    
               <!--  <el-form-item label="性别" prop="gender" label-width="15%">
                  <el-input 
                  v-model="userform.gender"
                  autocomplete="off"
                  >  </el-input></el-form-item> -->
    
    
                  <el-form-item label="性别" prop="gender" label-width="15%">
                    <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                       <el-option
                        v-for="item in genderList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
    
    
                  <el-form-item label="手机号" prop="phone" label-width="15%">
                    <el-input 
                    v-model="userform.phone"
                    autocomplete="off"
                    > </el-input></el-form-item>
                   
                    <el-form-item label="邮箱" prop="email" label-width="15%">
                      <el-input 
                      v-model="userform.email"
                      autocomplete="off"
                      > </el-input></el-form-item>
    
    
    
                      
              </el-form>
    
    
    
    
    
              <div slot="footer" class="dialog-footer">
                <el-button @click="userFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="userSubmit()">确 定</el-button>
              </div>
            </el-dialog>
            
  
  
  
            <!-- //修改密码表单 -->
  
            <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="30%">
              <el-form :model="userform">
  
                <el-form-item label="账户" disabled prop="name" label-width="15%">
                  <el-input type="text" v-model="userform.name" autocomplete="off"></el-input>
                </el-form-item>
  
              <el-form-item label="旧密码" prop="password3" label-width="15%">
                <el-input type="password" v-model="userform.oldpassword" autocomplete="off" show-password></el-input>
              </el-form-item>
  
              <el-form-item label="新密码" prop="password1" label-width="15%">
                <el-input type="password" v-model="userform.newpassword" autocomplete="off" show-password></el-input>
              </el-form-item>
  
  
              <el-form-item label="确认密码" prop="password2" label-width="15%">
                <el-input type="password" v-model="userform.comfirmpassword" autocomplete="off" show-password></el-input>
              </el-form-item>
  
            </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="passwordFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePasswordSubmit()">确 定</el-button>
              </div>
            </el-dialog>
            
            
          

        </el-header>
        


        <el-footer>
          
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" style="margin-top: 20px">
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              
            >
              
            </el-tab-pane>
          </el-tabs>
        </el-footer>
          
         <!--  <el-main>
            
              <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <br><br>
                <el-form-item label="游戏名" class="game-label">
                  
                  <el-input v-model="searchForm.game_name" placeholder="游戏名"></el-input>
                </el-form-item>
    
    
                <el-form-item label="游戏类型" class="game-label">
    
                  <el-input v-model="searchForm.category" placeholder="游戏类型"></el-input>
    
                </el-form-item>
    
    
    
                <el-form-item label="发行日期" class="game-label">
                  <el-date-picker v-model="release_date" 
                  clearable
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  placeholder="选择日期"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 400px; margin-left: 20px"
                ></el-date-picker>
              </el-form-item>
        
    
    
    
                <el-form-item>
                  <el-button type="warning" @click="onSubmit()">搜索</el-button>
                </el-form-item>
  
                <el-button type="info" @click="clear">清空</el-button>
  
    
                <el-form-item>
                  <el-button type="primary" @click="add()" style="margin-left: 1050px">新增</el-button>
                </el-form-item>
    
    
              </el-form>
    
    
              <div class="table-container">
              <el-table :data="tableData" style="width: 100%; " border>
                <el-table-column prop="game_name" label="游戏名" width="180"> </el-table-column>
                
    
                <el-table-column  label="图片">
                  <template v-slot="scope">
                    <el-image
                      style="width: 140px; height: 100px; border-radius: 0%"
                      :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
                      :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
                    ></el-image>
                  </template>
                </el-table-column>
  
  
  
  
  
  
  
  
                
                
                
    
                <el-table-column prop="is_purchased" label="是否购买" width="140">
                  <template slot-scope="scope">
                    {{ scope.row.is_purchased == 1 ? '已购买' : '未购买' }}
                  </template>
                </el-table-column>
    
                <el-table-column prop="game_description" label="游戏描述"> </el-table-column>
                <el-table-column prop="release_date" label="发行日期"> </el-table-column>
                <el-table-column prop="category" label="种类"> </el-table-column>
    
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
    
                    <el-button type="primary" size="medium"> <router-link to="/shop"
                        style="text-decoration:none">详情页</router-link></el-button>
  
                 
                      &nbsp;&nbsp;
                   
                    <el-popconfirm
                     confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="这是一段内容确定删除吗？"
                    @confirm="handleDelete(scope.row.id)"
                  >
                    <el-button slot="reference" >删除</el-button>
                  </el-popconfirm>
                
  
  
  
                    <br><br>
                    <el-button type="primary" size="medium"  @click="edit(scope.row)">编辑</el-button>
    
                  </template>
                </el-table-column>
    
              </el-table>
              </div>
    
             
                <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="30%">
                  <el-form :model="form">
                    <el-form-item label="游戏名" prop="game_name" label-width="15%">
                  <el-input 
                  v-model="form.game_name"
                  autocomplete="off"
                  > </el-input></el-form-item>
  
  
  
  
                    <el-form-item label="图片" label-width="15%">
                      <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        action="http://47.99.51.143:9000/files/upload"
                        :on-success="successUpload"
                      
                        style="float: left; margin-left: 20px"
                      >
                      <img v-if="form.game_image" :src="'http://47.99.51.143:9000/files/' + form.game_image" class="avatar">
  
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                       
  
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
  
  
  
                    
  
  
  
  
  
  
                 
  
                      <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
                        <el-select v-model="form.is_purchased" placeholder="请选择" style="width:100%" >
                           <el-option
                            v-for="item in genderList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
  
  
  
  
  
                      <el-form-item label="游戏描述" prop="game_description" label-width="15%">
                        <el-input 
                        v-model="form.game_description"
                        autocomplete="off"
                        > </el-input></el-form-item>
                        <el-form-item label="发行日期" prop="release_date" label-width="15%">
                          <el-input 
                          v-model="form.release_date"
                          autocomplete="off"
                          > </el-input></el-form-item>
  
  
  
                          <el-form-item label="种类" prop="category" label-width="15%">
                            <el-input 
                            v-model="form.category"
                            autocomplete="off"
                            > </el-input></el-form-item>
                  </el-form>
  
  
  
  
  
                  <div slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                  </div>
                </el-dialog>
    
    
              
                
                <el-dialog title="个人信息修改" :visible.sync="userFormVisible" width="30%">
                  <el-form :model="userform">
                    <el-form-item label="账户名" prop="name" label-width="15%">
                  <el-input
                  v-model="userform.name"
                  autocomplete="off"
                  > </el-input></el-form-item>
  
                  <el-form-item label="昵称" prop="pet" label-width="15%">
                    <el-input 
                    v-model="userform.pet"
                    autocomplete="off"
                    > </el-input></el-form-item>
  
  
  
  
                    
  
  
                    <el-form-item label="头像" >
                      <el-upload
                        class="avatar-uploader"
                        action="http://47.99.51.143:9000/upload"
                        
                        name="image"
                        :show-file-list="false"
                        :on-success="successUserUpload"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="userform.image" :src="userform.image" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                    
  
  
  
  
  
  
                   
  
                      <el-form-item label="性别" prop="gender" label-width="15%">
                        <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                           <el-option
                            v-for="item in genderList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
  
  
                      <el-form-item label="手机号" prop="phone" label-width="15%">
                        <el-input 
                        v-model="userform.phone"
                        autocomplete="off"
                        > </el-input></el-form-item>
                       
                        <el-form-item label="邮箱" prop="email" label-width="15%">
                          <el-input 
                          v-model="userform.email"
                          autocomplete="off"
                          > </el-input></el-form-item>
  
  
  
                          
                  </el-form>
  
  
  
  
  
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="userFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="userSubmit()">确 定</el-button>
                  </div>
                </el-dialog>
  
  
  
  
  
  
  
  
            
          </el-main> -->
  
  
          <el-main>
            <router-view></router-view>
          </el-main>
  
  
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :background="background"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
  
         
  
        </el-container>
  
      </el-container>
  
    </div>
  
  
  
  
  
  </template>
  
  <script>
  import request from '@/request/request.js';
  import { EventBus } from '@/main.js';

  export default {
    data() {
      return {
        wordFlag: false,
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

        background: true,
        // 每页显示的条数
        pageSize: 5,
        // 总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        dialogFormVisible: false,
        isCollapse: true,
        form: {},
        userFormVisible: false,
        passwordFormVisible: false,
        userform: {
          image: "",
          oldpassword: "",
          password: "",
          newpassword: "",
          comfirmpassword: "",
        },
        tableData: [],
        genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
        searchForm: {
          game_name: "",
          category: ""
        },
        release_date: "",
        showBadge: false,
        cart: [],
        editableTabsValue: '1',
        editableTabs: [{
          id: 1,
          title: '首页',
          name: '1',

        }],
        tabIndex: 2,
      };
    },
    methods: {
      toggleBadge() {
        this.showBadge = false; // 点击后隐藏 "new" 提示
      },
      loadcart() {
        request.get("games/cart").then(res => {
          if (res.code === "0") {
            this.cart = res.data;
            if (this.cart.length > 0) {
              this.showBadge = true; // 点击后隐藏 "new" 提示
            } else {
              this.showBadge = false; // 点击后隐藏 "new" 提示
            }
          } else {
            this.$message.error('获取购物车失败');
          }
        });
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      addTab() {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: '首页',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      toggleCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      userEdit() {
        request.get("/user/" + this.user.id).then((res) => {
          if (res.code === "0") {
            this.userform = res.data;
            this.user = res.data;
            localStorage.setItem("user", JSON.stringify(res.data));
            this.userFormVisible = true;
          }
        })
      },
      usernewEdit() {
        request.get("/user/" + this.user.id).then((res) => {
          if (res.code === "0") {
            this.userform = res.data;
            this.user = res.data;
            localStorage.setItem("user", JSON.stringify(res.data));

          }
        })
      },
      passwordEdit() {
        request.get("/user/" + this.user.id).then((res) => {
          if (res.code === "0") {
            this.userform.name = res.data.name;
            this.userform.id = res.data.id;
            this.passwordFormVisible = true;
          }
        })
      },
      changePasswordSubmit() {
        if (!this.userform.newpassword || this.userform.newpassword !== this.userform.comfirmpassword || this.userform.oldpassword !== this.user.password) {
          this.$message.error("原密码不对，两次密码输入不一致或者密码为空");
        }
        else {
          this.userform.password = this.userform.newpassword;
          request.put("/user/password", this.userform).then((res) => {
            if (res.code === "0") {
              this.$message.success({ message: "修改成功", type: "success" });

              this.userform.password = "";
              this.userform.newpassword = "";
              this.userform.comfirmpassword = "";
              this.passwordFormVisible = false;
            } else {
              this.$message({ message: "修改失败", type: "error" });
            }
          });
        }
      },

      edit(obj) {
        this.form = obj;
        this.dialogFormVisible = true;
      },
      successUpload(res) {
        console.log(res);
        this.form.game_image = res.data;
      },
      successUserUpload(res, file) {
        console.log(res);
        console.log(file);
        this.userform.image = res.data;
        this.user.image = res.data;
        localStorage.setItem("user", JSON.stringify(this.user));
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      add() {
        this.form = {};
        this.dialogFormVisible = true;
        this.load();
      },
      userSubmit() {
        request.post("/user", this.userform).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "修改成功", type: "success" });
            //更新本地缓存
            /* localStorage.setItem("user", JSON.stringify(res.data)); */
            this.userFormVisible = false;
            this.load();
          } else {
            this.$message({ message: "修改失败", type: "error" });
          }
        });
      },
      submit() {
        request.post("/games", this.form).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "新增成功", type: "success" });
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$message({ message: "新增失败", type: "error" });
          }
        });
      },
      handleDelete(id) {
        request.delete("/games/" + id).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "删除成功", type: "success" });
            this.load();
          } else {
            this.$message({ message: "删除失败", type: "error" });
          }
        });
      },
      viewDetails(id) {
        alert("查看详情：" + id);
        // 可以根据 id 加载对应游戏的详情页
      },
      clear() {
        this.searchForm = { game_name: "", category: "" };
        this.load();

        this.page();
      },
      onSubmit() {
        request.get("/games/search", { params: this.searchForm }).then((res) => {
          if (res.code === "0") {
            this.tableData = res.data;
          } else {
            this.$message({ message: "查询失败", type: "error" });
          }
        });
      },
      handleSizeChange(val) {
        alert("每页记录数发生变化" + val);
      },
      handleCurrentChange(val) {
        alert("页码发生变化" + val);
      },
      load() {
        request.get("/games").then((res) => {
          if (res.code === "0") {
            this.tableData = res.data;
            console.log(this.tableData);
          } else {
            alert(res.msg);
          }
        });
      }
    },
    created() {
      this.load();
      this.loadcart();
      EventBus.$on('reloadSide', () => {
        this.loadcart();  // 重新加载数据的方法
      });
      EventBus.$on('reloadSide', () => {
        this.usernewEdit();  // 重新加载数据的方法
      });
    },
    mounted() {
      // 页面加载完成后，开始动画
      setTimeout(() => {
        this.wordFlag = true
      }, 200)
    },
    computed: {

    }
  };
</script>
    
  <style scoped>
  @import '../../css/vue.css';
  /*引入自定义的css*/
</style> 
    
    
    